<template>
    <div class="item-inner">
        <div class="item-title label">
            {{itemName}}
            <div>
                <a class="button button-light center" v-on:click='checkAll'>全部选择</a>
                <a class="button button-light center" v-on:click='unCheckAll'>取消选择</a>
                <a class="button button-light center" v-on:click='reverseCheck'>反向选择</a>
            </div>
        </div>
        <div class="item-input" :style="{height:height}" style="overflow:scroll">
            <!--<div class="f_left">-->
            <!--<input type="checkbox"><label>彩南作业区1站</label>-->
            <!--</div>-->
            <div class="f_left" v-for="check in checkValues">
                <input type="checkbox" v-model="check.checked"><label>{{check.value}}</label>
            </div>
        </div>
    </div>
</template>
<style>
    .f_left {
        float: left;
    }

    .f_left input[type=checkbox] {
        float: left;
        margin-top: 7px;
    }

    .f_left, label {
        float: left;
    }

    .center {
        margin: auto;
    }
</style>
<script>
    export default{
        props: ['checkValues', 'itemName', 'height'],
        methods: {
            setValues: function (values) {
                this.checkValues = values;
            },
            checkAll: function () {
                this.checkValues = this.checkValues.map(function (item) {
                    item.checked = true;
                    return item;
                });
            },
            unCheckAll: function () {
                this.checkValues = this.checkValues.map(function (item) {
                    item.checked = false;
                    return item;
                });
            },
            reverseCheck: function () {
                this.checkValues = this.checkValues.map(function (item) {
                    item.checked = !item.checked;
                    return item;
                });
            }
        }
    }
</script>
